/**
 * 事件修饰符
 * @click.once
 *
 * 目的在于把事件处理函数中非纯逻辑的程序分离出去
 *
 */

/**
 * .prevent -> 事件处理函数内部 -> Event.preventDafault()
 * .once -> 只调用一次事件处理 -> 调用一次以后移除
 * .stop -> 阻止事件冒泡 -> cancalBubble() stopPropagation
 * .capture -> 采用事件捕获 -> captrue: true
 * .self -> 跳过非事件源的事件触发
 * .passive -> 永远不调用 Event.preventDafault()
 */

/**
 * .prevent 和 .passive 不能连用
 *
 * 连用的情况一定需要注意执行顺序
 */

const App = {
  template: `
    <form @submit="onSubmit">
      <input type="text name="conten" />
      <button type="submit">Submit</button>
    </form>
  `,
  methods: {
    onSubmit (e) {
      e.preventDefault();
      console.log(123)
    }
  },
}

import { createApp } from 'vue'

const app = createApp(App)

app.mount('#app')